import {Carousel, Input, Radio} from "antd";
import './phone.less';
import wechat from '../../../assets/wechat-share.png';
import MenuIcon from './Menu/Menu'

const Phone = (props) => {
    let swiper = props.swiper;
    let menu = props.menu;
    let nav = props.nav;
    const Swiper = swiper.map((v,i)=> {
        if(v.state){
            return (
                <div>
                    <img src={v.photo}/>
                </div>
            );
        }
    })
    const Menu = menu.map((v,i)=>{
        if(v.state){
            return (
                <div>
                    <MenuIcon menuData={v}/>
                </div>
            )
        }
    })
    const Nav = nav.map((v,i)=>{
        return(
            <div>
                <div><img src={v.photoOne} alt=""/></div>
                <div>{v.name}</div>
            </div>
        )
    })
    return(
        <div className={'phone-box'}>
            <div className={'phone-main'}>
                <div className={'phone-content'}>
                    <div className={'phone-wechat-share'}>
                        <img src={wechat} alt="" width={'90px'}/>
                    </div>
                    <div style={{margin:'15px 0'}}>
                        <div><span className={'phone-title'}>B2C，精选商城</span></div>
                        <div style={{marginTop:'10px'}}><Input style={{borderRadius:'10px',padding:'10px',background:'rgb(240,240,240)'}} placeholder="快速搜索你想要的" /></div>
                    </div>

                    <Carousel className={'phone-swiper'}>
                        {Swiper}
                    </Carousel>

                    <div className={'phone-menu'}>
                        {Menu}
                    </div>

                    <div className={'phone-recommended'}>
                        <div><span style={{fontSize:'18px',fontWeight:600}}>为你推荐</span></div>
                        <div style={{marginTop:'20px'}}>
                            <Radio.Group defaultValue="默认排序">
                                <Radio.Button className={'phone-recommended-button'} value="默认排序">默认排序</Radio.Button>
                                <Radio.Button className={'phone-recommended-button'} value="销量排序">销量排序</Radio.Button>
                                <Radio.Button className={'phone-recommended-button'} value="价格排序">价格排序</Radio.Button>
                            </Radio.Group>
                        </div>
                        <div>
                            <div className={'phone-goods'}>
                                <div>
                                    <img src="https://img2.baidu.com/it/u=1174283872,2893606214&fm=26&fmt=auto" alt="" width={'100px'}/>
                                </div>
                                <div className={'phone-goods-info'}>
                                    <div><span style={{fontSize:'12px',fontWeight:700}}>Skechers斯凯奇男鞋复古运动鞋 厚底增高潮鞋熊猫鞋</span></div>
                                    <div style={{color:'#FF0000',fontSize:'12px'}}>￥<span style={{fontSize:'20px',fontWeight:700}}>8.80</span></div>
                                    <div style={{fontSize:'12px',color:'#B3B3B3',display:'flex',justifyContent:'space-between'}}><span>原价：<del>￥12.8</del></span><span>已售281件</span></div>
                                </div>
                            </div>
                        </div>
                        <div>
                            <div className={'phone-goods'}>
                                <div>
                                    <img src="https://img2.baidu.com/it/u=1174283872,2893606214&fm=26&fmt=auto" alt="" width={'100px'}/>
                                </div>
                                <div className={'phone-goods-info'}>
                                    <div><span style={{fontSize:'12px',fontWeight:700}}>Skechers斯凯奇男鞋复古运动鞋 厚底增高潮鞋熊猫鞋</span></div>
                                    <div style={{color:'#FF0000',fontSize:'12px'}}>￥<span style={{fontSize:'20px',fontWeight:700}}>8.80</span></div>
                                    <div style={{fontSize:'12px',color:'#B3B3B3',display:'flex',justifyContent:'space-between'}}><span>原价：<del>￥12.8</del></span><span>已售281件</span></div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div className={'phone-footer'}>
                    {Nav}
                </div>
            </div>


        </div>
    )
}

export default Phone;